<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>box-shadow</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			margin: 50px auto;
			background: #f7ca44;
		}
		/*
		x-offset 水平方向的偏移量 正往右偏移 负往左偏移
		y-offset 垂直方向的偏移量 正往下偏移 负往上偏移
		*/
		.box1{
			box-shadow: 5px 5px #53c7f0;
		}
		/*
		blur 模糊程度
		*/
		.box2{
			box-shadow: 5px 5px 15px #53c7f0;
		}
		/*
		spread 扩张程度
		*/
		.box3{
			box-shadow: 5px 5px 15px 5px #53c7f0;
		}
		/*
		inset 设置为内部阴影
		*/
		.box4{
			box-shadow: 5px 5px 15px 5px #53c7f0 inset;
		}
	</style>
</head>
<body>
	<div class="box1">
		
	</div>
	<div class="box2">
		
	</div>
	<div class="box3">
		
	</div>
	<div class="box4">
		
	</div>
</body>
</html>